<template>
	<view class="login-content">
		<view class="login-box">
			<image src="../../static/index/logo.png" mode=""></image>
			<view class="login-btn">
				<!-- 								<u-button type="success" shape="circle" @click="loginshow = true"
					:custom-style="customStyle">授权登录</u-button> -->
				<u-button type="success" shape="circle" @click="accreditLogin"
					:custom-style="customStyle">授权登录</u-button>
			</view>

			<u-checkbox-group @change="checkboxGroupChange">
				<u-checkbox @change="checkboxChange" v-model="item.checked" v-for="(item, index) in list" :key="index"
					:name="item.name" shape="circle" active-color="rgb(42,192,146)">
					{{item.name}} <span class="agreement" @click.stop="openAgree">《用户协议》</span>和 <span
						class="agreement" @click.stop="openPrivacy">《隐私协议》</span>
				</u-checkbox>
			</u-checkbox-group>

			<u-popup v-model="show" mode="bottom" border-radius="14" length="70%">
				<view class="popup-box">
					<!--  -->
					<u-parse :html="content"></u-parse>
<!-- 					<view class="agree-title">
						用户协议
					</view>
					<view>
					</view> -->
				</view>
			</u-popup>

			<u-popup v-model="loginshow" mode="bottom" border-radius="14" length="30%">
				<view class="popup-box">
					<view class="agree-title">
						获取授权
					</view>
					<view style="width: 61%;text-align: center; margin: 0 auto;margin-bottom: 20rpx;">申请获取您的手机号用于注册，
						完成后可使用更多功能
					</view>
					<view class="login-btn">
						<u-button type="success" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
							:custom-style="customStyle" shape="circle">获取微信手机号</u-button>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
import { toast } from "../../utils/common";
import { getAgreement,getPrivacy} from '../../api/user.js'
	export default {
		data() {
			return {
				customStyle: {
					backgroundColor: '#2AC092'
				},
				loginshow: false,
				show: false,
				content:'',
				list: [{
					name: '我已阅读并同意',
					checked: false,
					disabled: false
				}],
				pid:null
			}
		},
		mounted() {
			// this.getAP()
		},
		onLoad(options) {
			// 加入团队
			if(options.pid != undefined){
				this.pid = options.pid
			}
		},
		computed: {
			// mapState辅助函数, 可以快速引入store中的值
			// 此处的login代表,  store文件中的 state 中的 login, 登录状态
			...mapState(["getLogins"])
		},
		methods: {
			// 获取隐私政策及用户协议
			openPrivacy(){
				this.show = true;
				let that = this
				getPrivacy().then(res=>{
					that.content = res.data
				}).catch()
			},
			openAgree() {
				this.show = true;
				let that = this;
				getAgreement().then(res=>{
					// console.log(12121,res);
					that.content = res.data
				}).catch()
			},
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {
				//console.log(e);
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				// console.log(e);
			},
			//获取session_key
			async accreditLogin() {
				let flag = false;
				this.list.map(item => {
					if (!item.checked) {
						flag = true;
					}
				})
				if(flag){
					toast('请阅读并同意《用户协议》和《隐私协议》');
					return
				}
				let that = this
				uni.getProvider({
					service: 'oauth', //  授权
					success: function(res) {
						if (~res.provider.indexOf('weixin')) {
							uni.login({
								provider: 'weixin',
								success: function(loginRes) {
									let obj = {
										code: loginRes.code,
										pid: this.pid
									}
															// console.log(8,loginRes);
									that.$store.dispatch('getLogins', obj).then(res => {
										// console.log('res2558', res);
										that.goPageIndex()
										// that.loginshow = true;
									})
								}
							})
						}
					}
				})
			},
			// goINde
			goPageIndex(){
				// console.log(125);
				// 考试次数
				if(uni.getStorageSync('exam_count') == ''){
					uni.setStorageSync('exam_count', 5)
				}
				uni.reLaunch({
					url:'/pages/index/index'
				})
			},
			// 获取手机号
			getPhoneNumber(e) {
				console.log(e);
				let that = this;
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					that.decodePhone(e.detail.encryptedData, e.detail.iv)
				} else if (e.detail.errMsg == "bad parameter") {
					// 获取失败
				} else {
					console.log("用户点击了拒绝")
				}
			},
			//获取session_key

			//解析手机号
			//解密手机号码
			async decodePhone(encryptedData, iv) {
				let that = this
				let session_key = that.session_key
				let data = await that.$http.post(`${decodePhone}`, {
					iv: iv,
					encrypted: encryptedData,
					session_key: session_key
				})
				uni.showLoading({
					title: '请稍后...',
					mask: false
				})
				if (data.code == 0) {
					uni.hideLoading()
					that.wechatLogin(data.data.phone)
					that.phone = data.data.phone
					try {
						uni.setStorageSync("phone", that.phone)
					} catch {}

				} else {
					uni.showToast({
						title: '网路异常',
						icon: 'none'
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.login-box {
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;

		>image {
			width: 200rpx;
			height: 200rpx;
			margin: 200rpx;
		}

		.login-btn {
			width: 85%;
			margin: 0 auto;
			margin-bottom: 100rpx;
		}
	}

	.agreement {
		color: #2AC092;
	}

	.popup-box {
		padding: 30rpx;
		font-size: 30rpx;
		line-height: 2;

		.agree-title {
			text-align: center;
			font-size: 36rpx;
			margin-bottom: 20rpx;
		}
	}
</style>